<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./index.css">
    <title>WeChat</title>
</head>
<body>
    <!-- 第一个盒子 -->
    <div class="topbox1">
        <div class="imaging">
            <img src="./image/document.jpeg" alt="WeChatDocument">
            <div>·</div>
            <div class="dropdown-trigger" style="width: auto;padding: 0 8px;">
            小程序<span class="iconfont">&#xe687;</span>
            <!-- .down 仅作为菜单容器，无需额外样式 -->
            <div class="down">
                <ul class="dropdown-menu">
                    <li><a href="#">小程序开发文档</a></li>
                    <li><a href="#">小程序设计规范</a></li>
                    <li><a href="#">小程序运营指南</a></li>
                    <li><a href="#">小程序API参考</a></li>
                    <li><a href="#">小程序工具下载</a></li>
                    <li><a href="#">小程序常见问题</a></li>
                </ul>
            </div>
        </div>
    </div>
        
        <div class="samll6">
            <ul>
                <li><a href="#" class="num1">开发</a></li>
                <li><a href="#">介绍</a></li>
                <li><a href="#">设计</a></li>
                <li><a href="#">运营</a></li>
                <li><a href="#">数据</a></li>
                <li><a href="#">安全</a></li>
            </ul>
        </div>

        <div class="small7">
            <ul>
                <li><a href="#">社区</a></li>
                <li><a href="#">学堂</a></li>
                <li><a href="#" class="hrihir">翻译</a></li>
                <li><a href="#" class="hrihir">🔍</a></li>
            </ul>
        </div>
    </div>

    <!-- 第二个盒子 -->
    <div class="topbox2">
        <div class="baoguo">
            <div style="width: 8%; background-color: rgb(47, 210, 110)" class="wangcai">指南</div>
            <div style="width: 8%;" class="wangcai">框架</div>
            <div style="width: 8%;" class="wangcai">组件</div>
            <div style="width: 8%;" class="wangcai">API</div>
            <div style="width: 9%;" class="wangcai">服务端</div>
            <div style="width: 12%;" class="wangcai">平台能力<div class="column11"><span class="iconfont">&#xe687;</span></div></div>
            <div style="width: 8%;" class="wangcai">工具</div>
            <div style="width: 11%;" class="wangcai">云服务<div class="column11"><span class="iconfont">&#xe687;</span></div></div>
            <div style="width: 10%;" class="wangcai">更新日志</div>
        </div>
    </div>

    <!-- 第三个盒子 -->
    <div class="topbox3">
        <div class="leftbox">
            <div class="hiddenbox">
                <ul>
                    <li>起步</li>
                    <li>目录结构</li>
                    <li>配置小程序</li>
                    <li>小程序框架</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                    <li>小程序运行时</li>
                </ul>
            </div>
        </div>

        <div class="rightbox">
            <div class="documengto">
                <div style="display: flex;">
                    <p style="color: rgba(128, 128, 128, 0.614);">微信开发文档 &nbsp;</p>
                    <p>/ &nbsp;开发</p>
                </div>

                <div style="margin-top: 20px; margin-bottom: 20px;"><h1>开发指南</h1></div>

                <div><p>小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。</p></div>

                <div><p>本章分主题的介绍了小程序的开发语言、框架、能力、调试等内容，帮助开发者快速全面的了解小程序开发的方方面面。</p></div>

                <div><p>想要更具体了解关于框架、组件、API的详细内容，请参考对应的参考文档：</p></div>

                <div style="margin-left: 40px;">
                    <ul>
                        <li class="weixinyun">小程序框架参考文献</li>
                        <li class="weixinyun">小程序框架参考文献</li>
                        <li class="weixinyun">小程序框架参考文献</li>
                        <li class="weixinyun">小程序框架参考文献</li>
                        <li class="weixinyun">小程序框架参考文献</li>
                        <li class="weixinyun">小程序框架参考文献</li>
                        <li class="weixinyun">小程序框架参考文献</li>
                        <li class="weixinyun">小程序框架参考文献</li>
                        <li class="weixinyun">小程序框架参考文献</li>
                        <li class="weixinyun">小程序框架参考文献</li>
                    </ul>
                </div>

                <div class="haha" style="margin: 70px 0 70px 0;">
                    <div class="hangai">
                        <div class="xiyangyang">
                            <h3 style="width: 100%;display: flex;align-items: flex-start;">官方程序 小程序开发起步</h3>
                            <p style="margin-top: 20px; font-size: 12px;font-weight: 400;color: rgba(60, 60, 91, 0.705);">学习 5 节课程，从 0 至 1 做第一个属于你的小程序，深入浅出了解小程序开发。本系列视频，由腾讯...</p>
                        </div>
                        <div class="huitailang">
                            <img src="./image/0.jpg" alt="datu">
                        </div>
                    </div>
                </div>

                <div class="theend">
                    <p style="left: 0%;">关于腾讯&nbsp;关于QQ&nbsp;关于微信&nbsp;关于腾讯会议</p>
                    <p style="right: 0%;">Copyright © 2012-2025 Tencent. All Rights Reserved.</p>
                </div>

            </div>
        </div>
    </div>
</body>
</html>